<template>
  <!--走马灯-->
  <div class="riding-lantern">
    <div class="img-box" ref="imgBox">
      <!-- <template > -->
        <img
          v-for="(item,index) in imgUrl"
          :key = "index"
          :src="item"
          :title="title[index]"
          :width = "imgWidth"
          height="100%"
          class="img"
          @mouseout="intervalFlagOpen()"
          @mouseover="controlPulleyMove(index)"
          ref="img">
      <!-- </template> -->
    </div>
    <div class="controller">
        <div class="control-box" ref="controlBox">
          <!-- <template > -->
            <div
              v-for="(item,index) in imgUrl"
              :key="index"
              class="control-div"
              @mouseout="intervalFlagOpen()"
              @mouseover="controlPulleyMove(index)">
              <div class="control" ref="control">
                <template v-if="index == 0">
                  <div class="control-pulley" ref="controlPulley"></div>
                </template>
              </div>
            </div>
          <!-- </template> -->
        </div>
      </div>
  </div>
</template>

<script>
    export default {
        props: {
            imgUrl: {
                type:Object,
                default: []
            },
            title: {
                type:String,
                default: []
            }
        },
        data() {
            return {
                index: 0,
                tag: true,  // true表示向前，false表示向后
                myInterval: 0,
                intervalFlag: 1,

                imgWidth: "0%",
            }
        },
        mounted() {
            this.initElementsStyle()
            setInterval(() => {
                this.ridingLanternInterval()
            },1000)
        },
        methods: {
            initElementsStyle() {
                this.imgWidth = (100 / this.$refs.img.length) + "%",
                this.$refs.controlBox.style.width = 30 * this.$refs.controlBox.length + "px"
                this.$refs.imgBox.style.width = 100 * (this.$refs.img.length) + "%"
            },

            controlPulleyMove(index) {
                this.intervalFlag = 0
                clearInterval(this.myInterval)
                this.ridingLanternStart(index)
            },

            ridingLanternStart(index) {
                let original = this.$refs.control[0].offsetLeft
                let leftEnd = this.$refs.control[index].offsetLeft
                let step = leftEnd - original

                this.$refs.controlPulley[0].style.left = step + "px"

                if (step >= 0) {
                    this.$refs.imgBox.style.left = -(this.$refs.img[0].width * index) + "px"
                } else if (step < 0) {
                    this.$refs.imgBox.style.left = (this.$refs.img[0].width * index) + "px"
                }
            },

            ridingLanternInterval() {
                if (this.intervalFlag == 1) {
                    this.intervalFlag = 0 // 避免 myInterval 二次启用
                    this.myInterval = setInterval(() => {
                        this.ridingLanternStart(this.index % this.$refs.control.length)
                        if (this.index == this.$refs.control.length-1) {
                            this.tag = false
                        } else if (this.index == 0 && !this.tag) {
                            this.tag = true
                        }
                        if (this.tag) {
                            this.index++
                        } else {
                            this.index--
                        }
                    },2000);
                }
            },

            intervalFlagOpen() {
                this.intervalFlag = 1
            }
        }
    }
</script>

<style scoped>
  .riding-lantern {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #1d2128;
    border: 1px solid rgb(58, 60, 65);
    z-index: 999;
  }
  .img-box {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    transition: 0.5s;
  }
  .img-box .img {
    float: left;
  }
  .controller {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    margin: auto;
    height: 20px;
    line-height: 15px;
    text-align: center;
  }
  .control-box {
    cursor: pointer;
    height: 20px;
    display: inline-block;
  }
  .control-div {
    height: 20px;
    display: inline-block;
  }
  .control {
    position: relative;
    width: 20px;
    height: 5px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255,0.3);
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    transition: 0.2s;
  }
  .control:hover {
    background-color: rgba(255, 255, 255,0.5) !important;
  }
  .control-pulley {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 5px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255,0.6);
    transition: 0.3s;
  }
</style>
